<script>
  import EChart from '@comp/echart/EChart'

  export default {
    // 仪表盘
    name: 'DashChart',
    extends: EChart,
    props: {
      value: {
        type: Number,
        default: 0.7
      }
    },
    data() {
      return {
        option: {
          series: [
            {
              type: 'gauge',
              axisLine: {
                lineStyle: {
                  width: 30,
                  color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 40,
                fontSize: 18
              },
              tooltip: {
                formatter: params => {
                  return `${params.value}%`
                }
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: 'auto'
              },
              data: [
                {
                  value: 70
                }
              ]
            }
          ]
        }
      }
    },
    mounted() {
      this.initData()
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          this.option.series[0].data[0].value = val * 100
          this.updateOption()
        }
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped>
</style>
